<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // var obj1 = {
        //     name: 'name1',
        //     getName: function () {
        //         return this.name
        //     }
        // }

        // var obj2 = {
        //     name: 'name2'
        // }

        // // 对象方法调用，所以 this 指向 obj1
        // console.log(obj1.getName()) // obj1 name

        // // 使用 call 显示调用，改变了原来 this 指向，指向了 obj2
        // console.log(obj1.getName.call(obj2)) // obj2 name

        // var name = 'globalName'
        // var obj = {
        //     name: 'obj name',
        //     getName: function () {
        //         // 'use strict'  // 严格模式下，this 指向 undefined, null 会报错
        //         return this.name
        //     },
        //     getThis: function () {
        //         return this
        //     }
        // }
        // console.log(obj.getName.call(null)) // globalName
        // console.log(obj.getName.apply(undefined)) // globalName


        // // number boolean string 包装对象
        // console.log(obj.getThis.call(111)) // Number {111}
        // console.log(obj.getThis.call(true)) // Boolean {true}
        // console.log(obj.getThis.call('str')) // String {"str"}


        function f() {
            return this.a;
        }

        var g = f.bind({
            a: "azerty"
        });
        console.log(g()); // azerty

        var h = g.bind({
            a: 'yoo'
        }); // bind只生效一次！
        console.log(h()); // azerty

        var o = {
            a: 37,
            f: f,
            g: g,
            h: h
        };
        console.log(o.f(), o.g(), o.h()); // 37(对象方法调用,指向o), azerty, azerty
    </script>
</body>

</html>